<template>
    <div class="component" :class="{'border':border}">
        <i :style="{backgroundImage:`url(${icon})`}"></i>
        <input :type="type" :placeholder="placeholder" @input="this.$emit('input-action',input)" v-model="input">
    </div>
</template>

<script>
    export default {
        name: "WIconInput",
        props: {
            placeholder:{
                type: String,
                default: '请输入...'
            },
            icon: {
                type: String,
                default: ''
            },
            border: {
                type: Boolean,
                default: false
            },
            type:{
                type: String,
                default: 'text'
            }
        },
        data(){
            return{
                input: ''
            }
        }
    }
</script>

<style scoped>
    *{
        /*border: 1px solid red;*/
        margin: 0;
        padding: 0;
    }
    .component{
        position: relative;
        width: 100%;
        height: 40px;
        box-sizing: border-box;
    }
    i{
        width: 30px;
        height: 30px;
        position: absolute;
        top: 4px;
        left: 6px;
        z-index: 1;
        background-size: 21px 21px;
        background-repeat: no-repeat;
        background-position: 4px 5px;
    }
    input{
        border: none;
        outline: none;
        height: 100%;
        width: 100%;
        text-indent: 48px;
        font-family: cursive;
        font-size: 16px;
        background: rgb(234,234,234);
        border-radius: 2px;
    }
    .border{
        border: 1px solid gray;
    }
</style>
